<template>
  <div class="warehouse_search">
    <!-- 仓库条件搜索表单 -->
    <el-form :model="warehouse">
      <el-row>
        <!-- 仓库 -->
        <el-col :span="5">
          <el-input placeholder="请输入仓库名称" v-model="warehouse.name" clearable>
            <template slot="prepend">仓库</template>
          </el-input>
        </el-col>
        <!-- 地址 -->
        <el-col :span="5" :offset="1">
          <el-cascader v-model="addressSelected" clearable placeholder="请选择地址" :options="addressDownBox"
            :props="{ expandTrigger: 'hover' }" @change="handleAddressDataChange">
          </el-cascader>
        </el-col>
        <!-- 状态 -->
        <el-col :span="5">
          <el-select clearable placeholder="请选择状态" v-model="warehouse.state">
              <el-option key="正常" label="正常" value="正常"></el-option>
              <el-option key="异常" label="异常" value="异常"></el-option>
          </el-select>
        </el-col>
        <!-- 搜索仓库按钮 -->
        <el-col :span="5">
          <el-button type="primary" icon="el-icon-search" @click="searchWarehouse">搜索仓库</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'WarehouseSearch',
    data() {
      return {
        /* 供仓库信息 */
        warehouse: {
          name: '',
          state: '',
          address: '',
        },
        /* 选中的地址 */
        addressSelected: '',
        /* 地址下拉框数据 */
        addressDownBox: []
      }
    },
    methods: {
      /* 获得地址下拉框数据 */
      async getAddressData() {
          const { data: res } = await this.$http.get('settings/provinceCity/getAddressData.do')
          if (res.code == '1') {
            this.addressDownBox = res.others
          } else {
              console.log('获取地址下拉框数据失败!')
          }
      },
      /* 搜索仓库修改地址事件回调 */
      handleAddressDataChange(value) {
        const address = value[0] + " · " + value[1]
        this.warehouse.address = address
      },
      /* 搜索仓库事件 */
      searchWarehouse() {
        this.$bus.$emit('getWarehousePageList',this.warehouse)
        this.$bus.$emit('getWarehouseTotal')
      }
    },
    created() {
      this.getAddressData()
    }
  }

</script>

<style scoped>
  /* 搜索仓库表单 */
  .el-form {
    padding: 20px 20px;
  }

  .el-input {
    width: 270px;
  }

</style>